// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'



// 引入css文件
import "./index.css"

//使用Context (上下文 全局)
// 作用: 跨组件传递数据(比如 主题 语言)

// 如果两个组件是远方亲戚(比如 嵌套多层次) 可以使用Context实现组件通讯
// Context提供了两个组件 Provider和Consumer
// Provider 提供数据
// Consumer 消费数据



const { Provider, Consumer } = React.createContext()


class App extends React.Component {

    render() {
        return (
            <Provider value="pink" >
                <div className="app">
                    <Node />
                </div>
            </Provider>
        )
    }
}


const Node = props => {
    return (
        <div className="app">
            <SubNode />
        </div>
    )
}


const SubNode = props => {
    return (
        <div className="app">
            <Child />
        </div>
    )
}


const Child = props => {
    return (
        <div className="app">
            <p>我是子节点</p>
            <Consumer>
                {
                    data => <span>{data}</span>
                }
            </Consumer>
        </div>
    )
}







//3 渲染react元素
ReactDOM.render(<App
    tag={<p>这是段落</p>}
    fn={() => console.log("这是一个函数")}
    colors={['red', 'blue', 'greens']}
    name='jack'
    age={12} />,
    document.getElementById('root'))
